// 1.引入vue
import Vue from "vue";
// 2.引入Vuex
import Vuex from "vuex";
import axios from 'axios'
//3.Vuex其实本质是Vue的一个插件,所以我们要让Vue使用Vuex这个插件
Vue.use(Vuex);

//创建一个state对象
const state = {
  count: 0,
  price: 99,
  movieList:[],
};

//创建一个mutations对象
//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
//mutation中的函数的第一个参数就是当前的state对象
//既然 Vuex 的 store 中的状态是响应式的,Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项(修改数据的注意事项)
const mutations = {
  increment(state) {
    state.count++;
  },

  decrement(state) {
    state.count--;
  },
  //mutation中的函数的第二个参数载荷(payload) 都是接收commit的传参
  //vuex还是希望payload是一个对象,这样可以传递多个参数
  incrementN(state, { n }) {
    state.count += n;
  },

  incrementprice(state){
    state.price++
  },

  setMovieList(state,movieList){
    state.movieList=movieList
  }
};

const actions={
    incrementWait({commit}){
        setTimeout(()=>{
            //我们不要在action中操作数据
      //当异步完成以后,把数据交给mutation去操作数据
            commit('increment')
        },1500)
    },
    incrementNWait({commit},payload){
        setTimeout(()=>{
            commit('incrementN',payload)
        },1500)
    },

    async getMovieList({commit}){
        const result=await axios.get(
      "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a"
        );
        commit('setMovieList',result.data.data.list)
    }
}

//getters对象
// 有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数等等 需要计算，我们就用到了getters 类似于vue中的计算属性
// getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
const getters={
 //因为数据是state派生出来的，所以getters中的函数接收一个参数是state
 myMovieList(state){
   return state.movieList.filter((movie)=>{
    return movie.albumName.length <7 && movie.albumName.length >3
   })      
 },

//  可以传参的getters
yourMovieList(state){
    //如果计算属性在计算的时候，需要接收参数，则getters函数需要返回一个函数
    return ({start,end})=>{
        return state.movieList.filter((movie)=>{
            return movie.albumName.length<=end && movie.albumName.length>=start
        })
    }
}
}
//4.创建一个store(vuex的实例),参数是一个配置对象,在配置对象中可以配置actions,mutations,state,getters等等
//暴露出去供Vue实例的配置项挂载
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});
